<!DOCTYPE html>
<html>
  <head>
    <title>ScenarioServiceWorkerSyncRegistrationManager</title>
  </head>

  <body>
    <h3>Periodic Background Sync Example</h3>
    <h4>Registrations</h4>
    <p id="periodic-sync-registrations"></p>
    <div style="display: inline-block;">
      <input type="text" placeholder="tag name"  id="add-tag1">
      <input type="text" placeholder="min interval"  id="add-interval">
      <button onclick="registeredSync('periodic-sync')"> Register </button>
    </div>

    <div>
      <input type="text" placeholder="tag name"  id="remove-tag1">
      <button onclick="unregisterSync('periodic-sync')"> Unregister </button>
   </div>

   <div>
    <input type="text" placeholder="tag name"  id="dispatch-tag">
    <button onclick="dispatchPeriodicSyncEvent()"> Dispatch Periodic Sync Task </button>
   </div>

   <div>
    <button onclick="getSyncRegistrationsFromWebView2('periodic-sync')"> Get all Periodic Sync Registrations from WebView2</button>
   </div>
   <hr>

   <h3>Background Sync Example</h3>
    <h4>Registrations</h4>
    <p id="background-sync-registrations"></p>
    <div style="display: inline-block;">
      <input type="text" placeholder="tag name"  id="add-tag2">
      <button onclick="registeredSync('background-sync')"> Register </button>
    </div>

    <div>
      <input type="text" placeholder="tag name"  id="remove-tag2">
      <button onclick="unregisterSync('background-sync')"> Unregister </button>
   </div>
   <div>
    <button onclick="getSyncRegistrationsFromWebView2('background-sync')"> Get all Background Sync Registrations from WebView2</button>
   </div>

    <script>
    async function checkPermission() {
      const status = await navigator.permissions.query({name: 'periodic-background-sync'});
      if (status.state === 'granted') {
          console.log("periodic-background-sync permission is granted");
      } else {
          console.log("periodic-background-sync permission is denied");
      }
    }

    async function registerServiceWorker() {
      if ('serviceWorker' in navigator) {
        const registration = await navigator.serviceWorker.register(
          'ScenarioServiceWorkerSyncRegistrationManagerServiceWorker.js', {
              scope: './',
            });
      }
    }

    async function unregisterSync(type) {
      const registration = await navigator.serviceWorker.ready;
      let tag = document.getElementById("remove-tag1").value;
      if (type === "periodic-sync") {
        if ('periodicSync' in registration) {
          await registration.periodicSync.unregister(tag);
        }
      } else if (type === "background-sync") {
        tag = document.getElementById("remove-tag2").value;
        if ('sync' in registration) {
          await registration.sync.unregister(tag);
        }
      }
      getSyncRegistrations(type);
    }

    async function registeredSync(type) {
      const registration = await navigator.serviceWorker.ready;
      let tag = document.getElementById("add-tag1").value;
      if (type === "periodic-sync") {
        const interval = document.getElementById("add-interval").value;
        if ('periodicSync' in registration) {
          try {
              await registration.periodicSync.register(tag, { minInterval: interval });
          } catch (error) {
              console.log(error);
          }
        }
      } else if (type === "background-sync") {
        tag = document.getElementById("add-tag2").value;
        if ('sync' in registration) {
          try {
              await registration.sync.register(tag);
          } catch (error) {
              console.log(error);
          }
        }
      }
      getSyncRegistrations(type);
    }

    async function getSyncRegistrations(type) {
      const registration = await navigator.serviceWorker.ready;
      let elementId = "periodic-sync-registrations";
      let tags;
      if (type === "background-sync") {
        elementId = "background-sync-registrations";
        tags = await registration.sync.getTags();
      } else if (type === "periodic-sync") {
        tags = await registration.periodicSync.getTags();
      }
      var registrations = "";
        tags.forEach(tag => {
          registrations += "Tag name: ";
          registrations += tag;
          registrations += " ";
      });
      if (registrations === "") {
        registrations = "empty";
      }
      document.getElementById(elementId).textContent = registrations;
    }

    async function dispatchPeriodicSyncEvent() {
      const registration = await navigator.serviceWorker.ready;
      const tag = document.getElementById("dispatch-tag").value;
      chrome.webview.postMessage(`DispatchPeriodicSyncEvent ${tag}`);
    }

    async function getSyncRegistrationsFromWebView2(type) {
      if (type === "periodic-sync") {
        chrome.webview.postMessage("GetPeriodicSyncRegistrations");
      } else if ("background-sync") {
        chrome.webview.postMessage("GetBackgroundSyncRegistrations");
      }
    }

    checkPermission();
    registerServiceWorker();
    getSyncRegistrations("periodic-sync");
    getSyncRegistrations("background-sync");

    </script>
  </body>
</html>
